<script setup lang="ts">
const props = withDefaults(defineProps<{
  anchor: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top' | 'right' | 'left'
}>(), {
  anchor: 'top-left'
})
</script>

<template>
  <div class="position-anchor" :class="['position-anchor--' + props.anchor ]">
    <div><slot /></div>
  </div>
</template>

<style scoped lang="scss">
.position-anchor{
  position: absolute;
  width: 0;
  height: 0;
  display: flex;
  &.position-anchor-- {
    &center{
      justify-content: center;
      align-items: center;
    }
    &top-left{
      justify-content: left;
      align-items: flex-start;
    }
    &top-right{
      justify-content: right;
      align-items: flex-start;
    }
    &bottom-left{
      justify-content: left;
      align-items: flex-end;
    }
    &bottom-right{
      justify-content: right;
      align-items: flex-end;
    }
    &bottom{
      justify-content: center;
      align-items: flex-end;
    }
    &top{
      justify-content: center;
      align-items: flex-start;
    }
    &right{
      justify-content: flex-end;
      align-items: center;
    }
    &left{
      justify-content: flex-start;
      align-items: center;
    }
  }
}

</style>
